<template>
  <client-only>
    <!-- header -->
    <div class="nav-container page-component">
      <!--左侧导航 #start -->
      <div class="nav left-nav">
        <div class="nav-item ">
        <span class="v-link clickable dark"
              :onclick="'javascript:window.location=\'/hospital/'+hospital.hoscode+'\''">预约挂号 </span>
        </div>
        <div class="nav-item selected">
        <span class="v-link selected dark"
              :onclick="'javascript:window.location=\'/hospital/detail/'+hospital.hoscode+'\''"> 医院详情 </span>
        </div>
        <div class="nav-item">
        <span class="v-link clickable dark"
              :onclick="'javascript:window.location=\'/hospital/notice/'+hospital.hoscode+'\''"> 预约须知 </span>
        </div>
        <div class="nav-item "><span
            class="v-link clickable dark"> 停诊信息 </span>
        </div>
        <div class="nav-item "><span
            class="v-link clickable dark"> 查询/取消 </span>
        </div>
      </div>
      <!-- 左侧导航 #end -->

      <!-- 右侧内容 #start -->
      <div class="page-container">
        <div class="hospital-detail">
          <div class="common-header">
            <div class="title-wrapper"><span class="hospital-title">{{ hospital.hosname }}</span>
              <div class="icon-wrapper"><span class="iconfont"></span> {{ hospital.param.hostypeString }}</div>
            </div>
          </div>
          <div class="info-wrapper"><img :src="'data:image/jpeg;base64,'+hospital.logoData" :alt="hospital.hosname"
                                         style="width: 80px; height: 80px;">
            <div class="content-wrapper">
              <div></div>
              <div></div>
              <div></div>
              <div>
                <div class="icon-text-wrapper"><span class="iconfont prefix-icon"></span>
                  <span class="text"><p>{{ hospital.route }}</p>
              </span><span class="iconfont right-icon"></span></div>
              </div>
            </div>
          </div>
          <div class="title mt40"> 医院介绍</div>
          <div class="detail-content mt40"><p>{{ hospital.intro }}</p></div>
        </div>
      </div>
      <!-- 右侧内容 #end -->
    </div>
    <!-- footer -->
  </client-only>
</template>

<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'

import hospital from "../../../api/hospital";

export default {
  name: "A",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      hoscode: null,
      hospital: {
        param: {}
      }

    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.hoscode = this.$route.params.hoscode;
    this.initRegistrationDetailsOfHospitalDepartment()
  },
  //方法集合",
  methods: {
    //获取医院科室挂号详情信息
    initRegistrationDetailsOfHospitalDepartment() {
      //根据医院编号获取医院预约挂号详情
      hospital.getHospitalRegisteredByHoscode(this.hoscode).then(response => {
        this.hospital = response.data.hospital
      })
    }
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  }
}
</script>

<style scoped>
.hospital-detail .info-wrapper {
  width: 100%;
  padding-left: 0;
  padding-top: 0;
  margin-top: 0;
  flex-direction: inherit;
}

.hospital-detail .info-wrapper .text {
  font-size: 14px;

}

.hospital-detail .content-wrapper p {
  text-indent: 0;
}
</style>